<template>
  <div
    class="imagery"
    :class="{ minmum: minmum }"
    @transitionend="transitionend"
  >
    <div class="minimg" @click="minmum = false" v-if="!showLayers && selected">
      <img :src="selected.thumbnail" />
      <span>{{ selected.cnname }}</span>
    </div>

    <div
      v-for="layer in layers"
      class="layer"
      :key="layer.id"
      @click="select(layer)"
      v-show="showLayers"
    >
      <img :src="layer.thumbnail" :class="{ selected: layer === selected }" />
      <span>{{ layer.cnname }}</span>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      minmum: false,
      showLayers: false,
      selected: undefined,
      layers: [
        {
          _id: "5d4025ff7720c905f4e1f99e",
          dataType: "image",
          cnname: "天地图注记",
          enname: "tianditu_imagewithlabel",
          url: "http://t3.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=733bbd8eeb44d5c315ebf51a2778992a",
          coordType: "WGS84",
          requireField: " ",
          thumbnail:
            "https://lab2.cesiumlab.com/upload/878564e4-6a86-4752-9d98-68eb6e9bd37e/2019_07_30_19_32_35.jpg",
          date: "2020-12-03 08:39:40"
        },
        {
          _id: "5d4026417720c905f4e1f9a0",
          dataType: "image",
          cnname: "天地图影像",
          enname: "天地图_image",
          url: "http://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=733bbd8eeb44d5c315ebf51a2778992a",
          coordType: "WGS84",
          requireField: " ",
          thumbnail:
            "https://lab2.cesiumlab.com/upload/97ce8620-a191-4506-911d-a94f4f9d0385/2019_07_30_19_32_59.jpg",
          date: "2020-12-03 08:39:30"
        },
        {
          _id: "5d4025e27720c905f4e1f99d",
          dataType: "image",
          cnname: "天地图地图",
          enname: "天地图_map",
          url: "http://t2.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=733bbd8eeb44d5c315ebf51a2778992a",
          coordType: "WGS84",
          requireField: " ",
          thumbnail:
            "https://lab2.cesiumlab.com/upload/3aed23eb-a2ef-4d49-9893-ec1731c33b4a/2019_07_30_19_32_22.jpg",
          date: "2020-12-03 08:39:44"
        },

        {
          _id: "5d402c157720c91a3c59419e",
          dataType: "image",
          cnname: "高德地图",
          enname: "gaode_map",
          url:
            "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
          coordType: "GCJ02",
          requireField: " ",
          thumbnail:
            "https://lab2.cesiumlab.com/upload/54c71b94-892e-42ee-bdd7-858cf5fa2399/2019_07_30_19_37_56.jpg",
          date: "2019-07-30 19:37:57"
        },
        {
          _id: "5d402c377720c91a3c59419f",
          dataType: "image",
          cnname: "高德影像",
          enname: "gaode_image",
          url:
            "http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          coordType: "GCJ02",
          requireField: " ",
          thumbnail:
            "https://lab2.cesiumlab.com/upload/45548a6b-5cad-4f0f-8ca1-3c9372cefd99/2019_07_30_19_38_30.jpg",
          date: "2019-07-30 19:38:31"
        },

        {
          _id: "5d402c797720c91a3c5941a1",
          dataType: "image",
          cnname: "百度地图",
          enname: "baidu_map",
          url:
            "http://online1.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
          coordType: "BD09",
          requireField: " ",
          thumbnail:
            "https://lab2.cesiumlab.com/upload/e7a26b44-058e-420b-8554-8cf33dc7b7a6/2019_07_30_19_39_37.jpg",
          date: "2019-07-30 19:39:37"
        }
        // {
        //   _id: "5d402c997720c91a3c5941a2",
        //   dataType: "image",
        //   cnname: "百度影像",
        //   enname: "baidu_image",
        //   url:
        //     "http://shangetu1.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46",
        //   coordType: "BD09",
        //   requireField: " ",
        //   thumbnail:
        //     "https://lab2.cesiumlab.com/upload/764dee7e-4f17-4c93-ab35-54b6c0548054/2019_07_30_19_40_08.jpg",
        //   date: "2019-07-30 19:40:09"
        // },

        // {
        //   _id: "5d402d017720c91a3c5941a4",
        //   dataType: "image",
        //   cnname: "百度暗色",
        //   enname: "baidu_map_midnight",
        //   url:
        //     "http://api0.map.bdimg.com/customimage/tile?=&x={x}&y={y}&z={z}&scale=1&customid=midnight",
        //   coordType: "BD09",
        //   requireField: " ",
        //   thumbnail:
        //     "https://lab2.cesiumlab.com/upload/5ff215b3-2013-4169-a132-e456e65ecfd2/2019_07_30_19_41_53.jpg",
        //   date: "2019-07-30 19:41:53"
        // },
        // {
        //   _id: "5d402d2f7720c91a3c5941a5",
        //   dataType: "image",
        //   cnname: "百度黑色",
        //   enname: "baidu_map_dark",
        //   url:
        //     "http://api2.map.bdimg.com/customimage/tile?=&x={x}&y={y}&z={z}&scale=1&customid=dark",
        //   coordType: "BD09",
        //   requireField: " ",
        //   thumbnail:
        //     "https://lab2.cesiumlab.com/upload/2144191a-8cf0-446c-9c63-b3c4de21d0ba/2019_07_30_19_42_38.jpg",
        //   date: "2019-07-30 19:42:39"
        // },
        // {
        //   _id: "5d402d4d7720c91a3c5941a6",
        //   dataType: "image",
        //   cnname: "OSM地图",
        //   enname: "openstreetmap",
        //   url: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
        //   coordType: "WGS84",
        //   requireField: " ",
        //   thumbnail:
        //     "https://lab2.cesiumlab.com/upload/f236ad7a-bc54-4f93-91ca-3e7f8be7faa6/2019_07_30_19_43_08.jpg",
        //   date: "2019-07-30 19:43:09"
        // },

        // {
        //   _id: "5e67150c7720c9077482b6bf",
        //   dataType: "image",
        //   cnname: "Arcgis影像",
        //   enname: "arcgis_imagery",
        //   url:
        //     "http://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        //   coordType: "WGS84",
        //   requireField: "",
        //   thumbnail:
        //     "https://lab2.cesiumlab.com/upload/c38aab50-46c5-482d-9038-8d25dfb40dcd/2020_03_10_12_18_07.jpg",
        //   date: "2020-03-10 12:25:52"
        // },

        // {
        //   _id: "5fc836a47720c901d0357575",
        //   dataType: "image",
        //   cnname: "GeoQ英文",
        //   enname: "GeoQ英文",
        //   url:
        //     "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunityENG/MapServer/tile/{z}/{y}/{x}",
        //   coordType: "WGS84",
        //   requireField: "",
        //   thumbnail:
        //     "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunityENG/MapServer/tile/1/0/1",
        //   date: "2020-12-03 08:54:39"
        // },
        // {
        //   _id: "5fc8368e7720c901d0357572",
        //   dataType: "image",
        //   cnname: "GeoQ蓝黑",
        //   enname: "GeoQ蓝黑",
        //   url:
        //     "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        //   coordType: "WGS84",
        //   requireField: "",
        //   thumbnail:
        //     "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/1/0/1",
        //   date: "2020-12-03 08:54:44"
        // },
        // {
        //   _id: "5fc8367b7720c901d035756d",
        //   dataType: "image",
        //   cnname: "GeoQ灰色",
        //   enname: "GeoQ灰色",
        //   url:
        //     "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
        //   coordType: "WGS84",
        //   requireField: "",
        //   thumbnail:
        //     "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/1/0/1",
        //   date: "2020-12-03 08:54:49"
        // },
        // {
        //   _id: "5fc836667720c901d0357569",
        //   dataType: "image",
        //   cnname: "GeoQ暖色",
        //   enname: "GeoQ暖色",
        //   url:
        //     "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
        //   coordType: "WGS84",
        //   requireField: "",
        //   thumbnail:
        //     "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/1/0/1",
        //   date: "2020-12-03 08:54:53"
        // },
        // {
        //   _id: "5fc835267720c901d0357557",
        //   dataType: "image",
        //   cnname: "GeoQ彩色",
        //   enname: "GeoQ彩色",
        //   url:
        //     "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
        //   coordType: "WGS84",
        //   requireField: "",
        //   thumbnail:
        //     "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/1/0/1",
        //   date: "2020-12-03 08:55:53"
        // },
        // {
        //   _id: "5d401d9c7720c908b40066c9",
        //   dataType: "image",
        //   cnname: "天地图地图",
        //   enname: "tianditu_map",
        //   url: "http://t6.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}",
        //   coordType: "WGS84",
        //   requireField: "tk",
        //   thumbnail:
        //     "https://lab2.cesiumlab.com/upload/b2989021-2a82-457d-8703-69c288154cee/2019_07_30_18_38_17.jpg",
        //   date: "2019-07-30 18:38:44"
        // },
        // {
        //   _id: "5d4023c17720c905f4e1f99c",
        //   dataType: "image",
        //   cnname: "天地图影像",
        //   enname: "tianditu_image",
        //   url: "http://t6.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}",
        //   coordType: "WGS84",
        //   requireField: "tk",
        //   thumbnail:
        //     "https://lab2.cesiumlab.com/upload/ee3ab9e0-b769-46e4-95e0-91bfe1787792/2019_07_30_19_32_02.jpg",
        //   date: "2019-07-30 19:32:07"
        // }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.select(this.layers[4]);
    }); 
    function domContain(dom, child) {
      if (dom === child) return true;
      if (!child) return false;
      return domContain(dom, child.parentElement);
    }
    //添加一个发生在dom元素外部的事件
    function addOutterEventListener(dom, name, callback) {
      return document.body.addEventListener(name, e => {
        e = e || event;
        //判断event是否发生在dom内部
        if (!domContain(dom, e.target)) {
          if (callback) callback(dom);
        }
      });
    }
    //添加一个外部事件，如果点击后隐藏
    addOutterEventListener(this.$el, "mousedown", () => {
      this.minmum = true;
      this.showLayers = false;
    });
  },
  methods: {
    select(layer) {
      this.selected = layer;
      this.minmum = true;
      this.showLayers = false;
      //如果url为空，那么设置一个平整地形

      var earth = this.$root._earth;

      if (this._imagery) {
        this._imagery.destroy();
        this._imagery = undefined;
      }

      this._imagery = new XE.Obj.Imagery(earth);

      this._imagery.xbsjImageryProvider = {
        type: "XbsjImageryProvider",
        XbsjImageryProvider: {
          url: this.selected.url,
          srcCoordType: this.selected.coordType,
          dstCoordType: "WGS84"
        }
      };
    },
    transitionend() {
      this.showLayers = !this.minmum;
    }
  }
};
</script>
<style scoped>
.imagery {
  position: absolute;
  right: 10px;
  bottom: 30px;
  background-color: gray;
  width: 270px;
  height: 210px;
  transition:  all 0.5s ease;
  z-index: 10000;
  border: 2px solid #9c9595;
  border-radius: 10px;

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  align-content: space-around;
}
.minmum {
  width: 64px;
  height: 64px;
  background-color: unset;
  border: unset;
}
.layer {
  width: 70px;
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.layer img {
  border-radius: 10px;
  width: 64px;
  height: 64px;
}
.layer img.selected {
  border: 2px solid #ea9903;
}
.layer span {
  white-space: nowrap;
}
.minimg {
  border-radius: 10px;
  border: 2px solid #ea9903;
  position: relative;
  width: 64px;
  height: 64px;
}
.minimg img {
  border-radius: 10px;
  width: 64px;
  height: 64px;
}
.minimg span {
  color: white;
  position: absolute;
  left: 0px;
  width: 100%;
  top: 0px;
  height: 100%;
  text-align: center;
  margin-top: 24px;
}
</style>